<template>
    <div>
        <van-nav-bar title="个人中心">
            <van-icon name="search" slot="right"/>
        </van-nav-bar>
        <div class="user-poster" ref="userBg">
            <div>
                <div @click="getPicture">
                    <svg-icon v-if="imgFile === ''" width="5em" height="5em" icon-class="avatar"></svg-icon>
                    <van-image v-else round width="85px" height="85px" :src="imgFile"/>
                </div>
                <!--                <van-uploader :before-rea="beforeRead" :after-read="afterRead" style="color: #fff">-->
                <!--                    <svg-icon  v-if="imgFile === ''"  width="5em" height="5em" icon-class="avatar"></svg-icon>-->
                <!--                    <van-image v-else round width="85px" height="85px" :src="imgFile" />-->
                <!--                </van-uploader>-->
                <div class="user-name">
                    徐达
                </div>
            </div>
        </div>
        <van-cell-group class="user-group">
            <van-cell icon="records" title="历史记录" is-link/>
        </van-cell-group>

        <van-cell-group>
            <van-cell icon="chat-o" title="cordova原生API接入" @click="enterPage" is-link/>
            <van-cell icon="info-o" title="关于我们" is-link/>
        </van-cell-group>
    </div>
</template>

<style lang="less" scoped>
    .user {
        &-poster {
            width: 100%;
            height: 53vw;
            /*background: url("../../../public/header_bg1.jpg") no-repeat;*/
            background-repeat: no-repeat;
            /*background: #4db7f5;*/
            display: flex;
            justify-content: center;
            align-items: center;
        }

        &-name {
            margin-top: 5px;
            text-align: center;
            color: #fff;
        }

        &-group {
            margin-bottom: 15px;
        }

        &-links {
            padding: 15px 0;
            font-size: 12px;
            text-align: center;
            background-color: #fff;

            .van-icon {
                display: block;
                font-size: 24px;
            }
        }
    }
</style>
<script>
    import {Toast} from "vant";
    import device from "@/plugins/device";
    import loadImage from "@/plugins/imageloader";

    export default {
        data() {
            return {
                fileList: [],
                imgFile: "",
            }
        },
        created() {
            this.getBatteryStatus()

        },
        mounted() {
            loadImage(['img/header_bg1.jpg'], () => {
                this.$refs.userBg.style.backgroundImage = 'url("img/header_bg1.jpg")'
            })
        },
        methods: {
            enterPage() {
                this.$router.push('device-api')
            },
            getPicture() {
                device.getImage((res) => {
                    Toast("照片路径存放在：" + res)
                    this.imgFile = res
                    // device.alert(JSON.stringify(res))
                })
            },
            beforeRead(file) {
                if (file.type !== 'image/png') {
                    Toast('请上传 png 格式图片');
                    return false;
                }
                return true;
            },
            afterRead(file) {
                console.log(file)
                this.imgFile = file.content;
            },

        }
    }
</script>
